<template>
    <div class="about">
        <!-- <div>
            <h2>State</h2>
            <p>{{ $store.state.mdB.user }}</p>
            <p>{{ $store.state.mdB.age }}</p>
            <p>{{ $store.state.mdB.height }}</p>
            <p>{{ $store.state.mdB.weight }}</p>
        </div>

        <div>
            <h2>getters</h2>
            <p>{{ $store.getters["mdB/adult"] }}</p>
        </div>

        <div>
            <h2>mutations</h2>
            <p><button @click="$store.commit('mdB/addAge')">addAge</button></p>
        </div>

        <div>
            <h2>actions</h2>
            <p><button @click="$store.dispatch('mdB/addAge_Async')">addAge</button></p>
        </div> -->


        <div>
            <h2>State</h2>
            <p>{{ user }}</p>
            <p>{{ age }}</p>
            <p>{{ height }}</p>
            <p>{{ weight }}</p>
        </div>

        <div>
            <h2>getters</h2>
            <p>{{ adult }}</p>
        </div>

        <div>
            <h2>mutations</h2>
            <p><button @click="addAge()">addAge</button></p>
        </div>

        <div>
            <h2>actions</h2>
            <p><button @click="addAge_Async()">addAge</button></p>
        </div>

    </div>
</template>

<script>
// 如果访问模块中的数据

// 如果没有设置命名空间:
// 1. 访问模块中的state数据: 对应$store.state.模块名.xxx  => 通过$store.state对应模块名称访问

// 2. 访问模块中的getters mutations actions数据 => 直接通过根store,对应属性名和方法名访问 (访问getters mutations action 比较方便)  

// 如果设置了命名空间:
// 1. 访问模块中的state数据: 对应$store.state.模块名.xxx  => 通过$store.state对应模块名称访问

// 2. 访问模块中的getters mutations actions数据 => 通过$store对应模块名称访问
//  this.$store.getters["mdB/adult"]
//  this.$store.commit("mdB/addAge")
//  this.$store.dispatch("mdB/addAge_Async")

// 小结:
// 其实 无论是否设置命名空间 -> state都会都对应模块名存储数据,如果没有设置命名空间getters mutations actions => 相关属性和方法直接存储到根Store实例中, 如果设置了命名空间会在getters mutations actions 属性和方法名前添加模块名称,最终也是存储到根Store实例中 => 调用方式有些区别 
//      


  import {mapState,mapGetters,mapMutations,mapActions} from "vuex";

// mapState,mapGetters,mapMutations,mapActions 默认映射根Store中的数据和方法
// mapState("moduleName",[])   映射函数,还可以接收一个字符串,用于执行需要映射的模块


export default {
    name: "MdaView",
    computed: {
        // 使用命名空间 => 以下写法有问题
        ...mapState("mdB",["user","age","height","weight"]),
        ...mapGetters("mdB",["adult"])
    },
    methods: {
          ...mapMutations("mdB",["addAge"]),
          ...mapActions("mdB",["addAge_Async"]),
    },
    mounted() {
        console.log("根store", this.$store);
    },
}

</script>
